<template>
  <div>
    <div class="jnhfxq_box newsbox">
      <div class="jnhfxq_box_title">机构会议填写报名信息</div>

      <div class="jnhfxq_nr_box">
        <div class="title">
          <span style="margin-right: 4rem"
            >报名截止时间：{{ list.deadline_date }}</span
          >
          <span
            >会议时间：{{ list.meet_start_date }} -
            {{ list.meet_end_date }}</span
          >
        </div>

        <div class="newsjnhfxq_nr_box_input">
          <el-input
            placeholder="请输入单位"
            v-model="list.mechanism.name"
            disabled
          >
            <template slot="prepend">单位：</template>
          </el-input>
        </div>
        <div class="newsjnhfxq_nr_box_input">
          <el-input placeholder="请输入联系人" v-model="form.username">
            <template slot="prepend">联系人：</template>
          </el-input>
        </div>

        <div class="newsjnhfxq_nr_box_input">
          <el-input placeholder="请输入手机号" v-model="form.usermobile">
            <template slot="prepend">手机号：</template>
          </el-input>
        </div>
      </div>
      <div class="jnhfxq_2_box">
        <p><span>*</span> 参会人员：</p>
        <div class="table_item_hy">
          <el-table :data="form.users" stripe fit>
            <el-table-column prop="ids" type="index" width="54" label="序号">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="150">
              <template slot-scope="scope">
                <el-input :disabled="scope.row.display"
                  v-model="scope.row.name"
                  placeholder="请输入姓名"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="115">
              <template slot-scope="scope">
                <!-- <span v-if="scope.row.gender == '1'">男</span>
                <span v-if="scope.row.gender == '0'">女</span> -->
                <el-select v-model="scope.row.gender" :disabled="scope.row.display" placeholder="请选择">
                  <el-option label="男" :value="2"></el-option>
                  <el-option label="女" :value="1"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="身份类型" width="200">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type" :disabled="scope.row.display" placeholder="请选择">
                  <el-option
                    label="土地估价专业人员"
                    value="evaluate"
                  ></el-option>
                  <el-option label="登记代理人" value="agent"></el-option>
                  <el-option label="法定代表人" value="legal"></el-option>
                  <el-option label="股东" value="shareholder"></el-option>
                  <el-option label="其他" value="other"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="证件号码" width="220">
              <template slot-scope="scope">
                <el-input :disabled="scope.row.display"
                  v-model="scope.row.code"
                  placeholder="请输入证件号码"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="stay" label="住宿情况" width="115">
              <template slot-scope="scope">
                <el-select v-model="scope.row.stay" :disabled="scope.row.display" placeholder="请选择">
                  <el-option label="单住" :value="1"></el-option>
                  <el-option label="合住" :value="2"></el-option>
                  <el-option label="不住宿" :value="0"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"  width="300">
              <template slot-scope="scope">
                <el-input :disabled="scope.row.display"
                  v-model="scope.row.remark"
                  placeholder="请输入备注"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="75"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                <el-button @click="yichu(scope)" type="text">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="adduser_box_item" @click="adduser()">添加人员</div>
      </div>
      <div class="button_box_hfxq2">
        <el-button type="primary" @click="open()">提交报名</el-button>
      </div>
    </div>
  </div>
</template>
    <script>
export default {
  data() {
    return {
      id: this.$route.query.id,
      list: {
        mechanism: {},
      },
      form: {
        users: [],
      },
    };
  },
  mounted() {
    this.getinfo();
  },
  methods: {
    adduser() {
      let obj = {};
      if (this.form.users.length === 0) {
        this.form.users.push(obj);
      } else {
        let item = JSON.parse(
          JSON.stringify(this.form.users[this.form.users.length - 1])
        );
        // console.log(item);
        let errorMessage = "";
        if (!item.name) {
          errorMessage = "请填写姓名！";
        } else if (!item.gender) {
          errorMessage = "请选择性别！";
        } else if (!item.type) {
          errorMessage = "请选择身份类型！";
        } else if (
          (item.type === "evaluate" || item.type === "agent") &&
          !item.code
        ) {
          errorMessage = "请您填写证件号！";
        } else if ([0,1,2].includes(item.stay)  == false) {
          errorMessage = "请选择住宿情况！";
        }

        if (errorMessage !== "") {
          this.$message.error(errorMessage);
        } else {
          this.form.users[this.form.users.length - 1]['display'] = true
          this.form.users.push(obj);
        }
      }
    },
    /**
     * 获取信息列表
     */
    getinfo() {
      let that = this;
      let data = {
        type: 1,
        id: that.id,
      };
      that.$http.post("meet/machanism_meet", data).then((res) => {
        if (res.code === 1) {
          that.list = res.data;
        } else {
          that.list = {};
          that.$self.ts(res, 3);
        }
        // console.log(that.list)
      });
    },
    /**
     * 移除
     */
    yichu(e) {
      // console.log(e.$index, e.row);
      let res = {
        code: 1,
        msg: "确定移除吗？",
      };
      this.$self.ts(res, 2).then(() => {
        this.form.users.splice(e.$index, 1);
      });
    },
    /**
     * 提交申请
     */
    open() {
      if (this.form.users.length === 0) {
        this.$message.error("请您添加参会人员！");
        return;
      }

      let item = JSON.parse(
        JSON.stringify(this.form.users[this.form.users.length - 1])
      );
      let errorMessage = "";

      if (!item.name || !item.gender || !item.type || [0,1,2].includes(item.stay)  == false) {
        errorMessage = "请您填写完整信息！";
      } else if (
        (item.type === "evaluate" || item.type === "agent") &&
        !item.code
      ) {
        errorMessage = "请您填写证件号！";
      }

      if (errorMessage !== "") {
        this.$message.error(errorMessage);
        return;
      }

      let res = {
        code: 1,
        msg: "提交之后不可以修改，请认真核对您填写的信息是否正确，确定要提交吗？",
      };

      this.$self.ts(res, 4).then(() => {
        this.Submit();
      });
    },
    /**
     * 上传申请
     */
    Submit() {
      // console.log(this.form);
      let that = this;
      let data = that.form;
      data["id"] = that.id;
      data["type"] = 1;
      that.$http.post("meet/mechanism_meet_save", data).then((res) => {
        that.$self.ts(res, 2).then(() => {
          this.$router.push({ path: "/hyhybm" });
        });
      });
    },
    //  ==
  },
};
</script>
    <style>
.newsbox .table_item_hy .el-input__inner {
  border: none;
  background-color: inherit;
  color: rgba(124, 124, 124, 1);
}
.adduser_box_item {
  font-size: 0.2rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #1954a4;
  line-height: 30px;
  margin: 0.2375rem 0 0 0.0625rem;
  cursor: pointer;
  width: 80px;
}
.adduser_box_item:hover {
  color: #3e75c4;
}
.jnhfxq_box .el-input.is-disabled .el-input__inner {
  background-color: #ffffff !important;
}
.jnhfxq_box {
  background: #ffffff;
  border-radius: 0.125rem;
  box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.15);
  margin: 0.125rem 0.025rem 0.1rem 0.625rem;
  padding-bottom: 0.4875rem;
}
.jnhfxq_box_title {
  height: 0.9rem;
  text-align: center;
  line-height: 1rem;
  font-size: 0.25rem;
  font-weight: 400;
  color: #333333;
}
.jnhfxq_nr_box {
  width: 14rem;
  border-top: 0.0375rem dotted #dddd;
  margin: auto;
  font-size: 0.225rem;
  font-weight: 400;
  color: #333333;

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.newsjnhfxq_nr_box_input {
  width: 32%;
  margin-top: 0.25rem;
}
.jnhfxq_nr_box_input .el-input-group__prepend {
  width: 68px;
}
.jnhfxq_2_box {
  width: 14rem;
  margin: 0.15rem auto 0;
  font-size: 0.225rem;
  font-weight: 400;
  color: #333333;
}
.jnhfxq_2_box .el-table__header thead th {
  background-color: #ebf2fc !important;
  height: 0.625rem;
  font-size: 0.2rem;
  font-weight: 400;
  color: #1954a4;
  line-height: 0.375rem;
  text-align: center;
}
.jnhfxq_2_box .el-table__body-wrapper tbody td {
  text-align: center;
}
.jnhfxq_2_box p {
  font-size: 0.2rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 0.375rem;
  margin-bottom: 0.1625rem;
}
.jnhfxq_2_box p span {
  font-size: 0.2rem;
  color: #cd0000;
}
.button_box_hfxq2 .el-button {
  width: 2.5rem;
}
.button_box_hfxq2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}
.jnhfxq2_pz {
  display: flex;
  align-items: center;
  width: 14rem;
  margin: auto;
  border: 1px solid #e8eaee;
  height: 1.125rem;
}
.jnhfxq2_pz_title {
  width: 1.25rem;
  background: #f2f2f2;
  border-radius: 0.025rem 0px 0px 0.025rem;
  font-size: 0.2rem;
  font-weight: 400;
  color: #333333;
  line-height: 1.125rem;
  text-align: center;
}
.jnhfxq2_pz_upload {
  display: flex;
  align-items: center;
  padding-left: 0.275rem;
  box-sizing: border-box;
}
.jnhfxq2_pz_uploadbox .el-upload--picture-card {
  width: 0.8875rem;
  height: 0.8875rem;
  line-height: 1rem;
  background: #f2f2f2;
}
.jnhfxq2_pz_uploadbox .el-upload--picture-card i {
  font-size: 0.35rem;
}
.uploadpz {
  font-size: 0.175rem;
  font-weight: 400;
  color: #333333;
  margin-left: 0.1375rem;
}
.jnhfxq2_pz_uploadbox .el-upload-list--picture-card .el-upload-list__item {
  width: 0.9rem;
  height: 0.9rem;
}
.sex .el-select .el-input__inner {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
</style>
<style scoped>
.sex {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.lable_sex {
  width: 110px;
  height: 40px;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  color: #909399;
  display: flex;
  align-items: center;
  padding: 0px 18px;
  box-sizing: border-box;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  flex-shrink: 0;
  flex-grow: 0;
  border-right: none !important;
}
.title {
  font-size: 0.25rem;
  font-weight: 400;
  color: #cd0000;
  line-height: 0.375rem;
  margin-bottom: 0.125rem;
}
.jnhfxq_nr_box {
  padding-top: 0.325rem;
}
</style><style scoped>
::v-deep .el-table tr {
  font-size: 0.2rem;
}
::v-deep .el-button {
  font-size: 0.2rem;
}
::v-deep .el-textarea {
  font-size: 16px;
}
</style>